<!-- 搜索详情页面 -->
<template>
    <view>
        <!-- 搜索组件布局 -->
        <view class="box-search" @click="onShowSearch">
            <uni-search-bar focus placeholder="搜索" @confirm="onSearch" @cancel="onClearKeyword" @clear="onClearKeyword"
                v-model="iptKeyword">
            </uni-search-bar>
        </view>
        <!-- 搜素内容布局 -->
        <view v-show="!searchWallpapers.length || isNoData || isShowSearch">
            <!-- 最近搜索布局 -->
            <view class="box-last-search" v-show="lastSearchKeywords.length">
                <!-- 最近搜索标题布局 -->
                <view class="box-flex-space">
                    <view>最近搜索</view>
                    <view @click="onClearLastSearchKeyword">
                        <uni-icons type="trash" size="30"></uni-icons>
                    </view>
                </view>
                <!-- 最近搜索内容布局 -->
                <view class="box-last-search-content">
                    <view class="box-last-search-content-item" v-for="(item, index) in lastSearchKeywords" :key="index"
                        @click="onSearchKeyword(item)">
                        {{item}}
                    </view>
                </view>
            </view>
            <!-- 热门搜索布局 -->
            <view class="box-popular-search">
                <!-- 热门搜索标题布局 -->
                <view>热门搜索</view>
                <!-- 热门搜索内容布局 -->
                <view class="box-last-search-content">
                    <view class="box-last-search-content-item" v-for="(item, index) in popularSearchKeywords"
                        :key="index" @click="onSearchKeyword(item)">
                        {{item}}
                    </view>
                </view>
            </view>
        </view>
        <!-- 无搜索结果布局 -->
        <view v-if="isNoData">
            <uv-empty mode="search" icon="http://cdn.uviewui.com/uview/empty/search.png"></uv-empty>
        </view>
        <!-- 搜索结果布局 -->
        <view v-else>
            <!-- 搜索结果内容布局 -->
            <view class="box-search-content box-grid-3">
                <view class="box-search-content-item" v-for="item in searchWallpapers" :key="item._id"
                    @click="onImageDetail(item._id)">
                    <image :src="item.smallPicurl" mode="aspectFill"></image>
                </view>
            </view>
            <!-- 底部加载布局 -->
            <view class="box-loading" v-show="searchWallpapers.length || isNoMoreData">
                <uni-load-more :status="isNoMoreData ? 'noMore' : 'loading'"></uni-load-more>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
    //导入
    import { ref } from "vue";
    import { onUnload, onReachBottom } from "@dcloudio/uni-app";
    import { showLoading, navigateTo } from "@/utils/uni-api.ts";
    import { url_image_detail } from "@/utils/url.ts";
    import { api_getSearchWallpaper } from "@/api/api.ts";

    //参数
    let iptKeyword = ref("");
    let searchKeyword = ref("");
    let pageParam = ref({ pageNum: 1, pageSize: 12 });
    let lastSearchKeywords = ref([]);
    let popularSearchKeywords = ref(["美女", "帅哥", "宠物"]);
    let isNoMoreData = ref(false);
    let searchWallpapers = ref([]);
    let isNoData = ref(false);
    let isShowSearch = ref(false);

    //初始方法执行
    getLastSearchKeyword();

    //内部事件
    //点击搜索
    function onSearch() {
        onSearchKeyword(iptKeyword.value);
    };
    //点击关键字搜索
    function onSearchKeyword(keyword : string) {
        init();
        lastSearchKeywords.value = [...new Set([keyword, ...lastSearchKeywords.value])].slice(0, 10);
        uni.setStorageSync("lastSearchKeywords", lastSearchKeywords.value);
        searchKeyword.value = keyword;
        showLoading({ title: "搜索中..." });
        getSearchWallpaper().finally(() => {
            uni.hideLoading();
        });
    };
    //点击删除关键字
    function onClearKeyword() {
        iptKeyword.value = "";
    }
    //点击删除最近搜索
    function onClearLastSearchKeyword() {
        lastSearchKeywords.value = [];
        uni.removeStorageSync("lastSearchKeywords");
    }
    //获取最近搜索
    function getLastSearchKeyword() {
        lastSearchKeywords.value = uni.getStorageSync("lastSearchKeywords") || [];
    }
    //点击图片
    function onImageDetail(id : string) {
        navigateTo({ url: url_image_detail + "?id=" + id });
    };
    //点击搜索控件
    function onShowSearch() {
        isShowSearch.value = true;
    };
    //重置
    function init() {
        pageParam.value = { pageNum: 1, pageSize: 12 };
        searchWallpapers.value = [];
        isNoMoreData.value = false;
        isNoData.value = false;
        isShowSearch.value = false;
    };

    //页面生命周期
    //页面卸载
    onUnload(() => {
        uni.removeStorageSync("subjectDetails");
    });
    //触底加载更多
    onReachBottom(() => {
        //不存在新数据时，不再进行查询
        if (isNoMoreData.value) {
            return;
        }
        pageParam.value.pageNum++;
        getSearchWallpaper();
    });

    //网络请求
    //获取搜索壁纸
    async function getSearchWallpaper() {
        let res : any = await api_getSearchWallpaper({
            "keyword": searchKeyword.value,
            "pageNum": pageParam.value.pageNum,
            "pageSize": pageParam.value.pageSize
        });
        if (pageParam.value.pageSize > res.data.length) {
            isNoMoreData.value = true;
        };
        if (searchWallpapers.value.length === 0 && res.data.length === 0) {
            isNoData.value = true;
        };
        searchWallpapers.value = [...searchWallpapers.value, ...res.data];
        uni.setStorageSync("subjectDetails", searchWallpapers.value);
    };
</script>

<style lang="scss" scoped>
    @import "@/common/css/common.css";

    .box-search {
        padding: 0rpx 30rpx;
    }

    .box-last-search {
        padding: 0 60rpx;
    }

    .box-last-search-content {
        padding-top: 30rpx;
        display: flex;
        flex-wrap: wrap;

        .box-last-search-content-item {
            border: 1px solid $custom-color-green;
            padding: 10rpx 20rpx;
            border-radius: 50rpx;
            margin: 0 10rpx 10rpx;
            line-height: 1em;
        }
    }

    .box-popular-search {
        padding: 30rpx 60rpx;
    }

    .box-search-content {
        padding: 0 30rpx;

        .box-search-content-item {
            height: 440rpx;

            image {
                width: 100%;
                height: 100%;
                border-radius: 10rpx;
            }
        }
    }
</style>